The Carousel is designed for use on landing pages and content pages. It displays a number of items within a scrollable carousel, each containing an image, caption and link through to a new page.

The Carousel can be used to highlight sub-sections of your site in a dynamic looking showcase, linking through to further information on each area.

The Carousel would work well for presenting research areas, projects, facilities, buildings, people, services and more.

Here is a live example

Take a look at how it works and then 'give it a try' by following the instructions below.

Instructions

Creating a carousel involves three main steps - 1) Creating the folder structure 2) Adding the Carousel items and 3) Adding the Carousel widget to display the carousel on your chosen page.

Step one: Creating the folder structure

1. To add items to your Carousel, you'll need to add a hidden sub-section called Carousel (case sensitive) directly beneath the section where you'd like the Carousel to appear (it's a hidden repository folder and so the 'Show in navigation' option needs to be unticked). In this example I want to show the Carousel on the About us page, so I have added the Carousel sub-section to that page.

Site structure showing the folder structure for a Carousel

2. Add a second hidden sub-section below your new Carousel sub-section. You can name this sub-section as you wish. In my example I've called the sub-section Flowers as the carousel items in it show different flowers.


Step two: Adding the carousel items

1. Add a Carousel item content type to your second sub-section (this is Flowers in my example), for each Carousel slide. Find out how to add a content type to a section.

Carousel item form fields

Field titleWhat should I do?Is it compulsory?
Name* This is the behind-the-scenes name, only visible to editors of the section. 

Note:
Similar to Accordions, the carousel items will display in alphabetical order, so you should use letters or numbers at the start of the name to manage the order they appear. For example a. Rose, b. Daffodil, c. Poppy etc.
Yes
Image* Click Select media to choose a image from the Media Library or to upload a new image. An image of 3000 pixels (wide) by 2000 pixels (high) is required for this content type. Please view the guidance on adding and selecting images in the Media Library. Yes
Internal Link Either click Add section link and navigate to the T4 page you want to link to. Yes
External Link Or copy and paste an external URL into this field. Eternal links must start with http:// or https://
Yes
Media Library Link

Or click Select media to add a document (pdf, Word, Powerpoint etc.,) from the Media Library

Note: YOU MUST ADD A LINK (INTERNAL, EXTERNAL OR MEDIA LIBRARY LINK) or this item won't display

No
Item Title* This appears underneath the image Yes
Information* This appears on the reverse of the item when you 'mouse over'. Yes
Display item?* This defaults to yes Yes

2. Click Save and approve to save your changes.
Save and approve option

Once you have created all your Carousel items, you now need to add another content type to display the carousel on your chosen web page.


Step three: Adding the Carousel widget to make it display on your web page

1. Add a Carousel widget content type to the page where you want the Carousel to appear (In my example this would be About us). Find out how to add a content type to a section.

2. Fill in the options (see table below). Name, Block title, Summary.

3. Find items. Use the Select option to tell the widget where you've put its Carousel items. In my example above I put the items in the sub-section of Carousel called Flowers. See screen grab above.

Carousel widget form fields:

Field titleWhat should I do?Is it compulsory?
Name* This is the behind-the-scenes name, only visible to editors of the section Yes
Block title* This title will be shown above the entire block, if switched on with the field below. Otherwise it will be an 'invisible' screenreader only heading and will ensure your page has and H2 Yes
Show block title Ticking this box will make the heading show to all users, not just screenreaders. No
Summary Enter a summary/introduction for your Carousel. It appears beneath the block title No
Find items* Point to the sub-folder where your Carousel items live. Yes
Display items* Defaults to Yes. Yes

4. Click Save and approve to save your changes.
Save and approve option